<template>
  <div class="content-123">
    <el-row class="border-bottom">
      <el-col :span="3">部门</el-col>
      <el-col :span="21">
        <el-button type="info">技术支撑部</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px" class="border-bottom">
      <el-col :span="3">项目</el-col>
      <el-col :span="21">
        <el-button v-for="project in projects"
                   :key="project.project_id"
                   :type="project.type"
                   @click.native="conditionHandleProject(project)"
        >{{project.project_name}}
        </el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px" class="border-bottom">
      <el-col :span="3">成员</el-col>
      <el-col :span="21">
        <el-button v-for="member in members"
                   :key="member.employee_no"
                   :type="member.type"
                   @click.native="conditionHandleMember(member)"
        >{{member.employee_name}}
        </el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px" class="border-bottom">
      <el-col :span="3">时间</el-col>
      <el-col :span="21">
        <el-row>
          <el-col :span="6">
            开始日期：
            <el-date-picker v-model="condition.beginTime"></el-date-picker>
          </el-col>
          <el-col :span="6">
            结束日期：
            <el-date-picker v-model="condition.endTime"></el-date-picker>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click.native="query()">搜索</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <template>
      <el-table :data="tableData"
                border
                style="width: 100%;margin-top: 40px">
        <el-table-column width="50" align="right"
                         label="序号">
          <template slot-scope="scope">
            {{scope.$index +1}}
          </template>
        </el-table-column>
        <el-table-column prop="project_name"
                         label="项目名称">
        </el-table-column>
        <el-table-column prop="project_version"
                         label="项目版本">
        </el-table-column>
        <el-table-column prop="project_phase"
                         label="工作阶段">
        </el-table-column>
        <el-table-column prop="name"
                         label="本周任务">
        </el-table-column>
        <el-table-column label="责任人">
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit===false">{{scope.row.employee_name}}</span>

            <div v-if="scope.row.isEdit===true">
              <el-select v-model="scope.row.employee_name">
                <el-option v-for="member in members"
                           :key="member.employee_no"
                           :label="member.employee_name"
                           :value="member.employee_name">
                </el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="progress"
                         label="完成进度(%)">
        </el-table-column>
        <el-table-column prop="end_time"
                         label="时间">
        </el-table-column>
        <el-table-column prop="is_plan_name"
                         label="计划内(外)">
        </el-table-column>
        <el-table-column prop="planned_work_unit"
                         label="计划工时(h)">
        </el-table-column>
        <el-table-column prop="real_work_unit"
                         label="实际工时(h)">
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click.native="editRecord(scope.$index,scope.row)">{{scope.row.isEdit?"保存":"编辑"}}
            </el-button>
            <el-button size="mini" type="danger" @click.native="deleteRecord(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template>
      <el-table :data="newWorkSchedule"
                border
                style="width: 100%;margin-top: 40px">
        <el-table-column label="项目名称">
          <template slot-scope="scope">
            <el-select v-model="scope.row.project_name">
              <el-option v-for="project in projects"
                         :key="project.project_id"
                         :label="project.project_name"
                         :value="project.project_name">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="project_version"
                         label="项目版本">
        </el-table-column>
        <el-table-column prop="project_phase"
                         label="工作阶段">
        </el-table-column>
        <el-table-column label="本周任务">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="责任人">
          <template slot-scope="scope">
            <el-select v-model="scope.row.employee_name">
              <el-option v-for="member in members"
                         :key="member.employee_name"
                         :label="member.employee_name"
                         :value="member.employee_name">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="begin_time" label="开始时间">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.begin_time"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="begin_time" label="结束时间">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.end_time"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="planned_work_unit"
                         label="计划工时(h)">
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="danger" @click.native="createRecord(scope.$index,scope.row)">添加计划</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import {Message} from 'element-ui';
import {fetchWorkSchedules, createWorkSchedule, updateWorkSchedule, deleteWorkSchedule} from '../api/plan.js';

let projects = [
  {project_name: '小碳管家', project_id: '1', type: ''},
  {project_name: 'ARP组件', project_id: '2', type: ''},
  {project_name: 'ARK平台', project_id: '3', type: ''}
];
let members = [
  {employee_name: '汪甫', employee_no: '1', type: ''},
  {employee_name: '吉明生', employee_no: '2', type: ''},
  {employee_name: '梁媛', employee_no: '3', type: ''},
  {employee_name: '张礼智', employee_no: '4', type: ''}
];

let WorkSchedule = function() {
  return {
    'pkid': null,
    'project_name': '',
    'real_work_unit': 0.0,
    'is_planned': '1',
    'project_phase': '系统设计',
    'end_time': '2018-11-01',
    'begin_time': '2018-11-02',
    'employee_name': '',
    'planned_work_unit': 2.0,
    'name': '',
    'progress': 0.0,
    'project_version': '1.0.0'
  };
};

export default {
  name: 'Content',
  data() {
    return {
      projects: projects,
      members: members,
      condition: {
        beginTime: '2018-11-01',
        endTime: '2018-11-11'
      },
      tableData: [],
      newWorkSchedule: []
    };
  },

  created() {
    this.newWorkSchedule.push(new WorkSchedule());
  },

  methods: {
    conditionHandleProject: function(project) {
      if (project.type === 'info') {
        project.type = '';
      } else {
        project.type = 'info';
      }
    },
    conditionHandleMember: function(member) {
      if (member.type === 'info') {
        member.type = '';
      } else {
        member.type = 'info';
      }
    },
    query: function() {
      fetchWorkSchedules().then((response) => {
        let array = response.data;
        for (let i = 0; i < array.length; i++) {
          array[i].sort_num_show = i + 1;
          array[i].is_plan_name = array[i].is_planned === 1 ? '计划内' : '计划外';
          array[i].real_work_unit = Math.floor(array[i].real_work_unit * 8, 1);
          array[i].isEdit = false;

        }
        this.tableData = array;
        console.log(array);
      });
    },
    editRecord: function(index, workSchedule) {
      console.log(workSchedule);
      if (workSchedule.isEdit === false) {
        workSchedule.isEdit = true;
      } else {
        // 保存
        updateWorkSchedule(workSchedule).then(
          function(response) {
            Message({
              message: '更新计划项成功！',
              type: 'success',
              showClose: true
            });
            workSchedule.isEdit = false;
          }, function(response) {

          });
      }
    },
    deleteRecord: function(index, workSchedule) {
      console.log(index);
      console.log(workSchedule);
      deleteWorkSchedule(workSchedule.pkid).then(
        (response) => {
          Message({
            message: '删除计划项成功！',
            type: 'success',
            showClose: true
          });

          this.tableData.splice(index, 1);
        },
        (response) => {

        });
    },
    createRecord: function(index, workSchedule) {
      createWorkSchedule(workSchedule)
        .then(response => {
          console.log(response);
          Message({
            message: '计划项添加成功！',
            type: 'success',
            showClose: true
          });
          Message({
            message: `新纪录的id为${response.data}`,
            type: 'success',
            showClose: true
          });
          workSchedule.pkid = response.data.pkid;
          workSchedule.isEdit = false;
          this.tableData.push(workSchedule);
          this.newWorkSchedule[0] = new WorkSchedule();
        }, reason => {
          Message({
            message: reason.response.data.exception_message,
            type: 'warning',
            showClose: true
          });
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
  .content-123 {
    position: relative;
    margin: 20px;
  }

  .border-bottom {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }
</style>
